<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detil.css">
</head>
<body>
    <!--这是导航栏 nav-->
    <div class = "nav">
        <img src="imge/ph.png" alt="">
        <!--标题 span-->
        <span>我的博客系统</span>
       <!--这是一个空白元素用来占位置-->
        <div class="spacer"></div>
        <!--链接标签<a>-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!--# 空链接-->
        <a href="#">注销</a>
    </div>

    <!--这里的.container 作为页面的版心-->
    <div class="container">
        <!--左侧个人信息-->
        <div class="left">
            <!--表示整个用户信息区域 card卡片-->
            <div class="card">
                <img src="imge/rose1.jpg" alt="">
                <h3>挽风</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>

            </div>
        </div>


        <!--右侧内容详情-->>
        <div class="right">
            <!--使用这个 div 来包裹整个博客的内容详情-->
           <div class="blog-content">
               <!--博客标题-->
               <h3>我的第一篇博客</h3>
               <!--博客的时间-->
               <div class="date">2022-05-07 20:27:00</div>
               <!--正文,里面有好几个段落,每个段落我们可以用p标签,随机生成lorem-->
               <p>
                   从今天开始,我要开始摆烂!Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi recusandae iusto ipsa labore, quae, corrupti animi adipisci asperiores iste nulla ea voluptas molestiae, exercitationem beatae reprehenderit aperiam assumenda eveniet. Ex?
               </p>
               <p>
                   Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, tempore quibusdam reprehenderit libero nam aspernatur tenetur vero, ex veniam corporis ut animi quis reiciendis sint quasi, debitis alias odit eligendi.
               </p>
               <p>
                   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita fugit, illo iure debitis laudantium consectetur eaque saepe? Maiores maxime nesciunt rerum culpa id temporibus numquam, corrupti, molestiae quas, libero minima.
               </p>
               <p>
                   我要摆烂啦!!!!Lorem
                
               </p>
               <p>
                   玲子哥哥哥哥哥哥~~~~~
               </p>



           </div>
        </div>
    </div>
    
</body>
</html>